<template>
  <div class="main">
    <div class="page" ref="pageHeight">
			<!-- 春节banner -->
			<div class="spring-div">
				<img src="@/assets/images/home/spring-bg.png" class="spring-bg" alt="">
			</div>
      <div class="goods-cont">
        <div>
          <div class="tabs-wrap">
            <spring-1688 :load-data="alibabaLoadData" v-show="channel == '1688'"></spring-1688>
            <spring-taobao v-show="channel == 'TAOBAO'" :load-data="taobaoLoadData"></spring-taobao>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Product from "./components/product";
import { productImageQuery, productKeywordQuery, productUploadImg, productImageUpload } from "@/api/product";
import TSort from "@/components/t-sort";
import TNoData from "@/components/t-no-data";
import { mapState } from "vuex";
import springTaobao from "@/views/main/goods/spring-taobao";
import spring1688 from "@/views/main/goods/spring-1688";
import { toSearchPage, leaveSearchPage } from "@/common/point/taobao";//淘宝埋点
export default {
  name: "index",
  components: { spring1688,springTaobao, TNoData, TSort, Product },
  data() {
    return {
      alibabaLoadData: true,
      taobaoLoadData: false,
      searchImage: '', // 搜索的图片
      channel: '1688',
      keywordText: '', // 搜索文本
      imageId: '', // 图片id,
      search: "",
      uploadURL: productImageUpload(),
      isSelectTab: true,
      selectTao: false,
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      },
      config: (state) => state.config.config,
      searchAgreement: (state) => {
        // 搜索协议
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_SEARCH;
        }
        return obj;
      }
    })
  },
  watch: {
    '$route'() {
      // 当路由（包括路径和参数）发生变化时，执行页面刷新
      window.location.reload();
			this.alibabaLoadData = this.channel == '1688' ? true : false;
			this.taobaoLoadData = this.channel == 'TAOBAO' ? true : false;
      this.searchInfo();
    }
  },
  created() {
    this.searchInfo();
    toSearchPage(window.location.href, localStorage.getItem('prevPage'));//淘宝埋点
  },
  methods: {
    onTab(name) {
      if (name == '1688') {
        this.isSelectTab = true
        this.selectTao = false
      } else if(name == 'TAOBAO'){
				this.isSelectTab = false
				this.selectTao = true
			}
			this.alibabaLoadData = name == '1688' ? true : false;
			this.taobaoLoadData = name == 'TAOBAO' ? true : false;
      this.channel = name;
    },
    searchInfo() {
      this.searchImage = '';
      this.keywordText = '';
      if (this.$route.query.type == 'image') {
        if (this.$route.query.id) {
          this.imageId = this.$route.query.id
        }
        this.getProductUploadImg();
      } else {
        let text = this.$route.query.text || this.$route.params.text
        if (text) {
          this.keywordText = text
        }
				let channel = this.$route.query.channel;
				if(channel){
					this.onTab(channel)
				}
      }
    },
    getProductUploadImg() {
      productUploadImg(this.imageId).then((res) => {
        this.searchImage = res.result;
      })
    }
  },
  beforeDestroy() {
    leaveSearchPage(window.location.href, localStorage.getItem('prevPage'));//淘宝埋点
  }
}
</script>

<style scoped lang="less">
/deep/.ivu-btn:hover {
  color: #FF186B;
  border-color: #FF186B;
}

/deep/.ivu-btn:focus {
  box-shadow: none;
}

.main {
  background: #FFFFFF;
}

.page {
  background: #FFFFFF;
  height: 100%;

  .scroll-content {
    height: 100%;
  }

  .tabs-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    border-bottom: 1px solid @t-border-color;

    .tabs-flex {
      display: flex;
      align-items: center;
    }

    .tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e8eaec;

      .tab-item {
        display: flex;
        align-items: center;
        padding: 0px 16px;
        opacity: 1;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #74767F;
        line-height: 28px;
        height: 46px;
        border-bottom: 2px solid rgba(0, 0, 0, 0);
        cursor: pointer;
        margin-right: 52px;

        .tab-icon {
          display: inline-block;
          width: 28px;
          height: 28px;
          margin-right: 8px;
        }

        &:hover {
          color: #FF186B;
        }
      }

      .tab-active {
        color: #FF186B;
        border-bottom: 2px solid #FF186B;
      }
			.spring-active{
				color: #E8412C;
				border-bottom: 2px solid #FF186B;
			}
    }

    .agreement {
      display: flex;
      align-items: center;
      // position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 27px;

      .agreement-text {
        color: @t-title-color;
      }

      .agreement-value {
        cursor: pointer;
        color: #FF186B;
        font-weight: 500;
      }
    }
  }

  .filter-content {
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    .sort {
      margin-right: 12px;
    }
  }
	.spring-div{
		font-size: 0;
		.spring-bg{
			width: 100%;
			height: auto;
		}
	}
  .goods-cont {
    margin: 0 160px 0 160px;
    min-height: 966px;
		
    .head-wrapper {
      display: flex;
      flex-direction: column;
      gap: 24px;

      .search-value {
        background: #e6e7f14d;
        border-radius: 7px 7px 7px 7px;
        padding: 22px;
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24px;
        color: #74767F;
        line-height: 35px;

        span {
          color: #333333;
          font-size: 32px;
        }

        .search-image {
          display: block;
          width: 80px;
        }
      }

    }

    .goods-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 22px 12px;
    }
  }

  .more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 32px;
    margin-bottom: 32px;

    .btn {
      width: 30%;
    }
  }


  .loading-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;

    .demo-spin-icon-load {
      animation: ani-demo-spin 1s linear infinite;
    }

    @keyframes ani-demo-spin {
      from {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .demo-spin-col {
      height: 100px;
      position: relative;
      border: 1px solid #eee;
    }
  }
}
</style>